<template>
  <n-form
    :model="formData"
    :rules="formRules"
    ref="formInstance"
    label-placement="left"
    label-width="80px">
    <n-grid x-gap="12" :cols="1" responsive="self">
      <n-gi>
        <n-form-item label="分组编码" path="fkDictGroupCode">
          <n-input v-model:value="formData.fkDictGroupCode" readonly="" placeholder="所属分组编码" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="字典名称" path="dictName">
          <n-input v-model:value="formData.dictName" placeholder="请输入字典名称" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="字典编码" path="dictCode">
          <n-input v-model:value="formData.dictCode" placeholder="请输入字典编码" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="排序" path="orderIndex">
          <n-input v-model:value="formData.orderIndex" placeholder="请输入排序" />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="状态">
          <n-radio-group v-model:value="formData.enabled">
            <n-space>
              <n-radio v-for="it in enabledOptions" :key="it.value" :label="it.label"
                       :value="it.value" />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="允许编辑">
          <n-radio-group v-model:value="formData.allowEdit">
            <n-space>
              <n-radio v-for="it in allowOptions" :key="it.value" :label="it.label"
                       :value="it.value" />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="允许删除">
          <n-radio-group v-model:value="formData.allowDel">
            <n-space>
              <n-radio v-for="it in allowOptions" :key="it.value" :label="it.label"
                       :value="it.value" />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
<!--      <n-gi>-->
<!--        <n-form-item label="字典属性" path="dictProperties">-->
<!--          <n-input v-model:value="formData.dictProperties" placeholder="请输入字典属性" />-->
<!--        </n-form-item>-->
<!--      </n-gi>-->
    </n-grid>
  </n-form>
</template>
<script lang="ts">
import { onMounted, ref } from "vue";
import { allowOptions, enabledOptions, formRules } from "./Service";
import httpApi from "./httpApi";
import { FormInst } from "naive-ui";
import { checkFormData } from "@/utils/formUtil";

export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    readMode: {
      type: [String],
      default: "read"
    },
    fkDictGroupCode: {
      type: [String],
      default: ""
    }
  },
  setup: function(props) {
    const formInstance = ref<FormInst | null>(null);
    const formData = ref<any>({
      id: props.id,
      enabled: 1,
      allowEdit: 1,
      allowDel: 1,
      orderIndex: 0,
      fkDictGroupCode:props.fkDictGroupCode
    });
    const init = async () => {
      if (props.id) {
        let msg = await httpApi.selectById(props.id);
        formData.value = msg.data;
      }
    };
    const doSubmit = async () => {
      await checkFormData(formInstance);
      return httpApi.doSaveEntity(formData.value);
    };
    const doUpdate = async () => {
      await checkFormData(formInstance);
      return httpApi.doUpdateEntity(formData.value);
    };
    onMounted(() => {
      init();
    });
    return {
      allowOptions,
      enabledOptions,
      formData,
      formInstance,
      formRules,
      doSubmit,
      doUpdate
    };
  }
};
</script>

<style lang="less" scoped></style>
